<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name required">课程名称</span>
            <span class="value">
               {{courseInfo.name}}
            </span>
          </div>
          <div class="item h100">
            <span class="name required">课程图片</span>
            <span class="value pics publicitypic">

                <div class="pic" v-for="(item,index) in courseInfo.pictrues" :key="index">
                  <bx-image :src="item" :width="80" :height="80" :show-delete="false" :index="index"></bx-image>
               </div>

            </span>
          </div>
          <div class="item">
            <span class="name required">课程分类</span>
            <span class="value">
               <div>大类：</div>
               <el-select v-model="courseInfo.keKindOneId" clearable @change="kekindOneChange"	 placeholder="选择大类" style="width: 130px; margin-left:10px;">
                  <el-option 
                  v-for="(item,index) in selectOptions.keKindOneId"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
              <div style="padding-left:10px">二类：</div>
               <el-select v-model="courseInfo.keKindTwoId" clearable @change="kekindTwoChange" :disabled="selectOptions.disabledTwo" placeholder="选择二类" style="width: 130px; margin-left:10px;">
                  <el-option 
                  v-for="(item,index) in selectOptions.keKindTwoId"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
              <div style="padding-left:10px">小类：</div>
               <el-select v-model="courseInfo.keKindThreeId" clearable :disabled="selectOptions.disabledThree" placeholder="选择小类" style="width: 130px; margin-left:10px;">
                  <el-option 
                    v-for="(item,index) in selectOptions.keKindThreeId"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item"  v-show="selectOptions.showClassGrade">
            <span class="name">年级</span>
            <span class="value">
              {{courseInfo.classGrade}}
            </span>
          </div>

          <div class="item h100">
            <span class="name required">课程简介</span>
            <span class="value">
              {{courseInfo.introduce}}
            </span>
          </div>
          <div class="item">
            <span class="name">是否随到随学</span>
            <span class="value">
              <el-checkbox v-model="courseInfo.isSuiDaoSuiXue"></el-checkbox>
            </span>
          </div>
          <div class="item" v-show="!courseInfo.isSuiDaoSuiXue">
            <span class="name">课程起始日期</span>
            <span class="value">
              <el-date-picker
                v-model="courseInfo.daterange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </span>
          </div>
          <div class="item" v-show="!courseInfo.isSuiDaoSuiXue">
            <span class="name">上课时间</span>
            <span class="value">
              <el-time-picker
                is-range
                v-model="courseInfo.timerange"
                range-separator="至"  value-format="HH:mm" 
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </span>
          </div>
          <div class="item">
            <span class="name required">课程价格</span>
            <span class="value">
              {{courseInfo.price}}元
            </span>
          </div>
          <div class="item">
            <span class="name">是否是试听课</span>
            <span class="value">
              <el-checkbox v-model="courseInfo.isAudition"></el-checkbox>
            </span>
          </div>
          <div class="item"  v-show="courseInfo.isAudition">
            <span class="name">试听价格</span>
            <span class="value">
              {{courseInfo.auditionPrice}}元
            </span>
          </div>
          <div class="item">
            <span class="name">选择教师</span>
            <span class="value">
              <el-select v-model="courseInfo.teacherIds" clearable placeholder="选择教师" style="width: 130px;">
                  <el-option 
                    v-for="(item,index) in selectOptions.teachers"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item">
            <span class="name required">时段</span>
            <span class="value">
              <el-select v-model="courseInfo.timeInterval" clearable placeholder="选择时段" style="width: 130px;">
                  <el-option 
                    v-for="(item,index) in selectOptions.timeInterval"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <div class="item">
            <span class="name required">班制</span>
            <span class="value">
              <el-select v-model="courseInfo.classZhi" clearable placeholder="选择班制" style="width: 130px;">
                  <el-option 
                    v-for="(item,index) in selectOptions.classZhi"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
          <!-- <div class="item">
            <span class="name required"></span>
            <span class="value">
              <el-button type="primary" @click="savePageInfo()">保存</el-button>
            </span>
          </div> -->
          <!--- end -->
      </div>
  </div>
</template>

<script>
import path from 'path'
import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as kindApi from '@/api/kekind'
import * as uploadApi from '@/api/upload'
import * as shopApi from '@/api/shop'
import draggable from 'vuedraggable'
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as fileUpload from '@/utils/fileupload'
//import * as qiniu from 'qiniu-js'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'CourseInfoEditShop',
  components: {
    draggable,
    BxImage
  },
  data() {
    return {
      courseInfo:{
        id:guid.empty,
        name:'',
        pictrues:[],
        pictruesOrigin:[],
        keKindOneId:'',
        keKindTwoId:'',
        keKindThreeId:'',
        daterange:[new Date(2020, 1, 1, 9, 0),new Date(2020, 1, 1, 12, 0) ],
        timerange:[new Date(2020, 1, 1, 9, 0), new Date(2020, 1, 1, 12, 0)],
        price:0.00,
        isSuiDaoSuiXue:false,
        isAudition:false,
        auditionPrice:0.00,
        teacherIds:'',
        timeInterval:'',
        classZhi:'',
        classGrade:'',
        learnObject:'',
        introduce:''
      },
      selectOptions:{
        keKindOneId:[],
        keKindTwoId:[],
        KeKindTwoIdAll:[],
        keKindThreeId:[],
        KeKindThreeIdAll:[],
        disabledThree:true,
        disabledTwo:true,
        showClassGrade:false,
        teachers:[],
        timeInterval:[
          {label:'随到随学',value:'随到随学'},
          {label:'每周末',value:'每周末'},
          {label:'每周六',value:'每周六'},
          {label:'每周日',value:'每周日'},
          {label:'每天',value:'每天'},
        ],
        classZhi:[
          {label:'一对一',value:'一对一'},
          {label:'10人小班',value:'10人内小班'},
          {label:'大班',value:'大班'},
        ]
      },
      upload:{
        token:'',
        pictrues:{
          running:false,
          percent:0,
          state:0,
          previewing:false
        }
      }
    }
  },
  computed: {
    
  },
  created() {
    var that=this;
    const id = that.$route.params && that.$route.params.id
    const token=auth.getToken();

    if(id && id!='0'){
      courseApi.getCourseInfo({id:id}).then(res=>{
         if(res.data){
            that.courseInfo.id=res.data.id;
             that.courseInfo.name=res.data.name;
             that.courseInfo.pictrues=[imageHelper.GetFullUrl(res.data.image,700,700)];
             that.courseInfo.pictruesOrigin=[res.data.image];
             
             that.courseInfo.price=res.data.price;
             that.courseInfo.isSuiDaoSuiXue=(res.data.isSuiDaoSuiXue==1);
             that.courseInfo.isAudition=(res.data.isAudition==1);
             that.courseInfo.auditionPrice=res.data.auditionPrice;
             that.courseInfo.teacherIds=res.data.teacherIds || '';
             that.courseInfo.timeInterval=res.data.timeInterval;
             that.courseInfo.classZhi=res.data.classZhi;
             that.courseInfo.classGrade=res.data.classGrade || '';
             that.courseInfo.learnObject=res.data.learnObject || '';
             that.courseInfo.introduce=res.data.introduce || '';
             //时间处理
             that.$set(that.courseInfo.daterange,0,new Date(res.data.dateStart));
             that.$set(that.courseInfo.daterange,1,new Date(res.data.dateEnd));
             that.$set(that.courseInfo.timerange,0,new Date('2020-01-01 '+res.data.timeStart));
             that.$set(that.courseInfo.timerange,1,new Date('2020-01-01 '+res.data.timeEnd));
            //  that.courseInfo.daterange[0]=new Date(res.data.dateStart);
            //  that.courseInfo.daterange[1]=new Date(res.data.dateEnd);
            //  that.courseInfo.timerange[0]=new Date('2020-01-01 '+res.data.timeStart);
            //  that.courseInfo.timerange[1]=new Date('2020-01-01 '+res.data.timeEnd);
             //处理分类
             that.courseInfo.keKindOneId=res.data.keKindOneId;

             that.kekindOneChange(res.data.keKindOneId);
             that.courseInfo.keKindTwoId=res.data.keKindTwoId;
             that.kekindTwoChange(res.data.keKindTwoId);
             that.courseInfo.keKindThreeId=res.data.keKindThreeId;

         }
      });
    }

    //加载分类数据
    kindApi.getKindList1().then(res=>{
       if(res.data){
          that.selectOptions.keKindOneId.push(...res.data.items.map(item=>{
              return {label:item.kindName,value:item.id,upId:''};
          }));
       }
    })

    shopApi.getTeacherList().then(res=>{
        if(res.data){
          that.selectOptions.teachers.push(...res.data.items.map(item=>{return {label:item.name,value:item.id}}));
        }
    });
  },
  methods: {
    
    //下拉框事件 一级分类
    kekindOneChange(val){
      var that=this;

        //一级分类选中 小学和中学时，额外展示一个 年级字段需要填写
        var oneitem=that.selectOptions.keKindOneId.filter(item=>{
            //注意第一级要比对value
            return item.value==val;
        });
        // if(oneitem[0] && ['小学','中学'].indexOf(oneitem[0].label)>-1){
        //     that.selectOptions.showClassGrade=true;
        // }else{
        //   that.selectOptions.showClassGrade=false;
        // }

        //加载二级分类
      disableTwo();
      if(that.selectOptions.KeKindTwoIdAll.length>0){
        var checkfilter=that.selectOptions.KeKindTwoIdAll.filter(item=>{return item.upId==val});
        if(checkfilter.length>0){
           that.selectOptions.keKindTwoId=[...checkfilter];
           enableTwo();
        }else{
           getTwoList(val)
        }
      }else{
        getTwoList(val)
      }

      function getTwoList(upId){
          if(!upId){return;}
          kindApi.getKindList2({upId:upId}).then(res=>{
             let twos=[];
             if(res.data){
               twos.push(...res.data.items.map(item=>{
                  return {value:item.id,label:item.kindName,upId:upId};
               }));
             }
             that.selectOptions.KeKindTwoIdAll.push(...twos)
             that.selectOptions.keKindTwoId=[...twos];
             enableTwo();
           })
      }

      function disableTwo(){
          that.selectOptions.disabledTwo=true;
          that.courseInfo.keKindTwoId='';
          that.selectOptions.disabledThree=true;
          that.courseInfo.keKindThreeId='';
      }
      
      function enableTwo(){
          that.selectOptions.disabledTwo=false;
      }

    },
    //下拉框事件 二级分类
    kekindTwoChange(val){
      var that=this;
        //加载三级分类
      disableThree();
      if(that.selectOptions.KeKindThreeIdAll.length>0){
        var checkfilter=that.selectOptions.KeKindThreeIdAll.filter(item=>{return item.upId==val});
        if(checkfilter.length>0){
           that.selectOptions.keKindThreeId=[...checkfilter];
           enableThree();
        }else{
           getThreeList(val)
        }
      }else{
        getThreeList(val)
      }

      function getThreeList(upId){
          if(!upId){return;}
          kindApi.getKindList3({upId:upId}).then(res=>{
             let threes=[];
             if(res.data){
               threes.push(...res.data.items.map(item=>{
                  return {value:item.id,label:item.kindName,upId:upId};
               }));
             }
             that.selectOptions.KeKindThreeIdAll.push(...threes);
             that.selectOptions.keKindThreeId=[...threes];
             enableThree();
           })
      }

      function disableThree(){
          that.selectOptions.disabledThree=true;
          that.courseInfo.keKindThreeId='';
      }
      
      function enableThree(){
          that.selectOptions.disabledThree=false;
      }

    }
  }
}
</script>

